<template>
  <ul class="Contact-container">
      <li>
          <a href="">
              <Icon type="github"></Icon>
              <p class="text">{{data.github}}</p>
          </a>
         
      </li>
       <li>
          <a :href="`mailto:${data.qq}@qq.com`" >
              <Icon type="mail"></Icon>
              <p class="text">{{data.qq}}@qq.com</p>
          </a>
         
      </li>
       <li>
          <a :href= "`tencent://message/?Menu=yes&uin=${data.qq}&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45`">
              <Icon type="qq"></Icon>
              <p class="text">{{data.qq}}</p>
          </a>
          <div class="code">
              <img :src="data.weixinQrCode" alt="">
          </div>
      </li>
       <li>
          <a href="">
              <Icon type="weixin" class="weixin"></Icon>
              <p class="text weixintext">{{data.weixin}}</p>
          </a>
          <div class="code">
              <img :src= 'data.weixinQrCode'  alt="">
          </div>
      </li>
  </ul>
</template>

<script>
import { mapState } from 'vuex';

import Icon from '../../Icon/index.vue';
export default {
    computed:mapState('setting',['loading','data']),
    components: { Icon },
    mounted(){
        console.log(this.data)
    }
    
}
</script>

<style lang="less" scoped>
@import "../../../style/var.less";
.Contact-container{
    list-style: none;
    margin: 0;
    padding:0; 
   padding: 10px;
    width: 100%;
    color: @lightWords;
    li{
 position: relative;
 height: 30px;
 margin:13px 0;
 

    }
   .code{
       position: absolute;
       left: 30px;
       bottom: 25px;
       z-index: 2;
       padding: 7px;
       width: 120px;
       height: 120px;
       border-radius: 5px;
       background: #fff;
       transform: scale(0);
       transform-origin: center bottom ;
       transition: 0.3s;
       img{
       width: 100%;
       height: 100%;
       object-fit: cover;
      
      
        }
       &:after{
           content:'';
           position: absolute;
           transform: translate(-80%) rotate(45deg);
           bottom: -3px;
           left:50%;
           
           border: 5px solid #fff;
           border-left-color: transparent;
           border-top-color: transparent;
           
         

       }
   }
    a{
        display:flex;
        align-items:center;
        font-size: 26px;
        &:hover~.code{
            
            transform: scale(1);
        }
      
        .text{
            font-size: 14px;
            margin :10px 10px;
        } 
           .weixintext{
            margin: 7px;
        } 
    .weixin{
     font-size:32px;
     text-indent: -4px;
     
 }
        }
     
    }
    
    

</style>